{% extends 'base_backend.html' %}
{% load static %}
{% block section_content %}
    <div class="row" id="nav-app">
        <div class="col-lg-3 col-xs-3">
            <div class="small-box bg-red">
                <div class="inner">
                    <p>任务统计</p>
                    <h3 id="acceptTask">{{ source_count }}</h3>
                </div>
                <div class="icon">
                    <!--<i class="glyphicon glyphicon-star-empty"></i>-->
                    <i class="fa fa-bell"></i>
                </div>
                <a href="{% url 'task:manage' %}"  class="small-box-footer">
                    详情&nbsp;
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-lg-3 col-xs-3">
            <div class="small-box bg-aqua">
                <div class="inner">
                    <p>配置统计</p>
                    <h3 id="myTask">{{ task_count }}</h3>
                </div>
                <div class="icon">
                    <i class="fa fa-sitemap"></i>
                </div>
                <a href="{% url 'task:mine' %}" class="small-box-footer">
                    详情&nbsp;
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-lg-3 col-xs-3">
            <div class="small-box bg-green">
                <div class="inner">
                    <p>配置统计</p>
                    <h3 id="myConfig">{{ config_count }}<sup style="font-size: 20px"></sup></h3>
                </div>
                <div class="icon">
                    <i class="fa fa-list"></i>
                </div>
                <a href="{% url 'task:config' %}" class="small-box-footer">
                    详情&nbsp;
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-lg-3 col-xs-3">
            <div class="small-box bg-yellow">
                <div class="inner">
                    <p>支出统计</p>
                    <h3 id="myIncome">{{ income }}</h3>
                </div>
                <div class="icon">
                    <i class="fa fa-diamond"></i>
                </div>
                <a href="{% url 'task:income' %}" class="small-box-footer">
                    详情&nbsp;
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="row">
        <!-- 收入增长图 -->
        <section class="col-md-6 connectedSortable">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">总收入增长图</h3>
                    <div class="box-tools pull-left">
                        <span class="label label-primary">最近6个月</span>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div id="incomeIncreasingMonthly" style="width:100%;height:280px;"></div>
                </div>
            </div>
        </section>
        <!-- 每月收入 -->
        <section class="col-md-6 connectedSortable">
            <div class="box box-warning">
                <div class="box-header with-border">
                    <h3 class="box-title">每月收入</h3>
                    <div class="box-tools pull-left">
                        <span class="label label-primary">最近6个月</span>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div id="incomeMonthly" style="width:100%;height:280px;"></div>
                </div>
            </div>
        </section>
        <!-- 任务总量增长趋势图 -->
        <section class="col-md-6 connectedSortable">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">任务总量增长图</h3>
                    <div class="box-tools pull-left">
                        <span class="label label-primary">最近6个月</span>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div id="taskCountsIncreasingMonthly" style="width:100%;height:280px;"></div>
                </div>
            </div>
        </section>
        <!-- 每月领取任务量 -->
        <section class="col-md-6 connectedSortable">
            <div class="box box-warning">
                <div class="box-header with-border">
                    <h3 class="box-title">每月领取任务量</h3>
                    <div class="box-tools pull-left">
                        <span class="label label-primary">最近6个月</span>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div id="newTaskCountsMonthly" style="width:100%;height:280px;"></div>
                </div>
            </div>
        </section>
        <!-- 任务完成量增长图 -->
        <section class="col-md-6 connectedSortable">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">任务完成量增长图</h3>
                    <div class="box-tools pull-left">
                        <span class="label label-primary">最近6个月</span>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div id="passedTaskCountsIncreasingMonthly" style="width:100%;height:280px;"></div>
                </div>
            </div>
        </section>
        <!-- 每月完成任务量 -->
        <section class="col-md-6 connectedSortable">
            <div class="box box-warning">
                <div class="box-header with-border">
                    <h3 class="box-title">每月完成任务量</h3>
                    <div class="box-tools pull-left">
                        <span class="label label-primary">最近6个月</span>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div id="passedTaskCountsMonthly" style="width:100%;height:280px;"></div>
                </div>
            </div>
        </section>
        <!-- 配置上传数量增长图 -->
        <section class="col-md-6 connectedSortable">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">配置上传数量增长图</h3>
                    <div class="box-tools pull-left">
                        <span class="label label-primary">最近6个月</span>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div id="configCountsIncreasingMonthly" style="width:100%;height:280px;"></div>
                </div>
            </div>
        </section>
        <!-- 每月上传配置数量 -->
        <section class="col-md-6 connectedSortable">
            <div class="box box-warning">
                <div class="box-header with-border">
                    <h3 class="box-title">每月上传配置数量</h3>
                    <div class="box-tools pull-left">
                        <span class="label label-primary">最近6个月</span>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div id="configCountsMonthly" style="width:100%;height:280px;"></div>
                </div>
            </div>
        </section>
    </div>
{% endblock section_content %}

{% block jquery_js %}

{% endblock jquery_js %}

{% block body_tail %}
    <!-- page script -->
    <script type="text/javascript" src="{% static 'plugins/echarts/extension/dataTool.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'plugins/echarts/echarts-all-3.js' %}"></script>
    <script src="{% static 'dist/js/demo.js' %}"></script>
    <script src="{% static 'zhongbao/js/theme/dark.js' %}"></script>
    <script src="{% static 'zhongbao/js/theme/infographic.js' %}"></script>
    <script src="{% static 'zhongbao/js/theme/macarons.js' %}"></script>
    <script src="{% static 'zhongbao/js/theme/roma.js' %}"></script>
    <script src="{% static 'zhongbao/js/theme/shine.js' %}"></script>
    <script src="{% static 'zhongbao/js/theme/vintage.js' %}"></script>
    <script type="text/javascript" src="{% static 'zhongbao/js/csrf.js' %}"></script>
    <script type="text/javascript" src="{% static 'zhongbao/js/util.js' %}"></script>
    <script type="text/javascript" src="{% static 'zhongbao/task/js/main.js' %}"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
            });
        });
    </script>
{% endblock body_tail %}